<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>区域图</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 影音分析系统 <span
        class="c-gray en">&gt;</span> 折线图 <a class="btn btn-success radius r"
                                                style="line-height:1.6em;margin-top:3px"
                                                href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <div class="f-14 c-error">特别声明：ApacheEchart 是一个基于 JavaScript 的开源可视化图表库，仅免费提供给个人学习、个人网站，如果在商业项目中使用，请去Apache
        Echart官网网站购买商业授权。或者您也可以选择其他免费的第三方图表插件，例如HighChart。华清远见不承担任何版权问题。
    </div>

    <div>
        <br>
        <hr>
        <br></div>
    <div id="container" class="cur" style="min-width:960px;height:400px"></div>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>

<!--引入公共的组件库，减少屎山代码-->
<script src="js/commons/commonlibs.js"></script>
<script src="js/auth/auth.js"></script>

<script type="module">


    let flag = await checkCurrentUserLoginStatus();
    flag = JSON.parse(flag);

    if(!flag){ //表示当前用户没有登录
        window.location.href = 'login.html';
    }

    //在这里准备去画这个折线图。怎么画呢？
    //1.去看echarts官网的案例。
    //2.从老师的网站上找现成的代码



    let chartDom = document.getElementById('container');
    let myChart = echarts.init(chartDom);

    //指定图表的配置项和数据
    let option = {
        //标题
        title: {
            text: '板块视频播放Top20分析统计'
        },
        //工具箱
        //保存图片
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {
                    show: true
                }
            }
        },
        //图例-每一条数据的名字叫销量
        legend: {
            data: ['播放量']
        },
        //x轴
        xAxis: {
            //data: ["Music", "Movie", "News", "Tiktok", "Sport", "DIY"]
            data: [],
            axisLabel: {
                interval: 0, //这个是字体距离
                rotate: -30//-30度角倾斜显示
            }
        },
        //y轴没有显式设置，根据值自动生成y轴
        yAxis: {},
        //数据-data是最终要显示的数据
        series: [{
            name: '播放量',
            type: 'line',
            //data: [40, 20, 35, 60, 55, 10]
            data: []
        }]
    };
    //使用刚刚指定的配置项和数据项显示图表
    myChart.setOption(option);

    window.onload = function () {
        initTopTwentyCatalogInfoList();
    }
    function initTopTwentyCatalogInfoList(){
        queryTopTwentyCatalogList().then(resp=>{
            if(resp.data.code === 200){
                console.log(resp.data.data);
                for(let i=0;i<resp.data.data.length;i++){
                    let obj = resp.data.data[i];
                    option.xAxis.data.push(obj.categoryName);
                    option.series[0].data.push(obj.categoryCount);
                }
            }
            //动态刷新；
            setTimeout(() => {
                //myChart.setOption(option, true);
                myChart.setOption(option, {replaceMerge: ['xAxis','series']}, true)
                myChart.hideLoading();
            }, 1000)
        })
    }

</script>
</body>
</html>